import $ from 'jquery'

var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        if (mutation.type === 'childList' && mutation.addedNodes[0]) {
            if ($(mutation.addedNodes[0]).find(".ld-checkbox").length !== 0) { // 监听元素的创建
                const inputs = mutation.addedNodes[0].querySelectorAll("input")
                for (let i = 0; i < inputs.length; i++) {
                    renderCheckbox($(inputs[i]), $(inputs[i]).val(), $(inputs[i]).attr("label"), $(inputs[i]).attr("checked"), $(inputs[i]).attr("disabled"))
                }
            }
        }
    });
});

observer.observe(window.document, {
    subtree: true,
    childList: true,
    attributes: true,
    attributeFilter: ['src', 'href', 'action']
});
// 多选框
$(".ld-checkbox").each(function () {
    renderCheckbox($(this), $(this).val(), $(this).attr("label"), $(this).prop("checked"), $(this).attr("disabled"))
})
// 全选
$(".ld-checkbox-checkAll").each(function () {
    renderCheckboxCheckAll($(this), $(this).attr("id"), $(this).val(), $(this).attr("label"), $(this).attr("disabled"))
})
function renderCheckbox(el, value, label, checked, disabled) {
    // console.log(el);
    // console.log(value);
    // console.log(label);
    // console.log(checked);
    // console.log(disabled);
    let checkedFlag = ""
    let disabledFlag = ""
    // 选中状态
    if (checked === "" || checked === "checked" || checked === true)
        checkedFlag = "checked"
    // 只读状态
    if (disabled === "" || disabled === "disabled" || disabled === true)
        disabledFlag = "disabled"
    const str = `<span class="ld-checkbox-item ${checkedFlag} ${disabledFlag}">
                    <input ${disabledFlag} ${checkedFlag} value=${value} class="ld-checkbox-init" type="checkbox" label="${label}">
                    <i class="ld-checkbox-inner"></i>
                    <span class="ld-checkbox-label">${label}</span>
                </span>`
    el.before(str)
    el.remove()
}
function renderCheckboxCheckAll(el, id, value, label, disabled) {
    let disabledFlag = ""
    // 只读状态
    if (disabled === "" || disabled === "disabled" || disabled === true)
        disabledFlag = "disabled"
    const str = `<span class="ld-checkbox-all ${disabledFlag}" props=${id} >
                    <input ${disabledFlag} value=${value} class="ld-checkbox-init" type="checkbox" label="${label}">
                    <i class="ld-checkbox-inner"></i>
                    <span class="ld-checkbox-label">${label}</span>
                </span>`
    el.before(str)
    el.remove()
}
// 选择多选框
$("body").on("click", ".ld-checkbox-item:not('.disabled')", function () {
    $(this).toggleClass("checked")
    if ($(this).find("input").prop("checked"))
        $(this).find("input").prop("checked", false)
    else
        $(this).find("input").prop("checked", true)
    if ($(this).parent().attr("prop")) {  // =====>  带全选功能
        const checkGroupId = $(this).parent().attr("prop")
        if ($(".ld-check-group[prop=" + checkGroupId + "]").find(".ld-checkbox-item .ld-checkbox-init:checked").length === $(".ld-check-group[prop=" + checkGroupId + "]").find(".ld-checkbox-item .ld-checkbox-init").length) {
            $(".ld-checkbox-all[props=" + checkGroupId + "]").addClass("checked").find("input").prop("checked", true)
        } else {
            $(".ld-checkbox-all[props=" + checkGroupId + "]").removeClass("checked").find("input").prop("checked", false)
        }
    }
})
// 选择全选
$("body").on("click", ".ld-checkbox-all:not('.disabled')", function () {
    const checkGroupId = $(this).attr("props")
    if ($(".ld-check-group[prop=" + checkGroupId + "]").find(".ld-checkbox-item .ld-checkbox-init:checked").length === $(".ld-check-group[prop=" + checkGroupId + "]").find(".ld-checkbox-item .ld-checkbox-init").length) {
        $(".ld-check-group[prop=" + checkGroupId + "]").find(".ld-checkbox-item .ld-checkbox-init").prop("checked", false)
        $(".ld-check-group[prop=" + checkGroupId + "]").find(".ld-checkbox-item").removeClass("checked")
        $(this).removeClass("checked")
    } else {
        $(".ld-check-group[prop=" + checkGroupId + "]").find(".ld-checkbox-item .ld-checkbox-init").prop("checked", true)
        $(".ld-check-group[prop=" + checkGroupId + "]").find(".ld-checkbox-item").addClass("checked")
        $(this).addClass("checked")
    }
})

// 页面初始化全选是否选中
$(".ld-check-group").each(function () {
    const checkGroupId = $(this).attr("prop")
    if ($(this).find(".ld-checkbox-init").length === $(this).find(".ld-checkbox-init:checked").length) {
        $(".ld-checkbox-all[props=" + checkGroupId + "]").addClass("checked").find(".ld-checkbox-init").prop("checked", true)
    } else {
        $(".ld-checkbox-all[props=" + checkGroupId + "]").removeClass("checked").find(".ld-checkbox-init").prop("checked", false)
    }
})